<template>
  <div class="home">
    <headInput></headInput>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item) in datalList.banner" :key="item.id">
        <img :src="item.url" alt />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="6" class="list">
      <van-grid-item v-for="item in datalList.channel" :key="item.id" :icon="item.iconUrl" :text="item.name" />
    </van-grid>
    <van-cell class="box">
      <van-cell title="优惠卷" class="p" />
      <van-cell v-for="item in datalList.couponList" :key="item.id" class="centent">
        <div class="van-coupon__content">
          <div class="van-coupon__head">
            <h2 class="van-coupon__amount">
              <span>￥</span>
              {{ item.discount }}
              <span>元</span>
            </h2>
            <p class="van-coupon__condition">{{ item.desc }}-{{ item.tag }}</p>
          </div>
          <div class="van-coupon__body">
            <p class="van-coupon__name">{{ item.name }}</p>
            <p class="van-coupon__valid">有效期：{{ item.days }}天</p>
          </div>
        </div>
      </van-cell>
    </van-cell>
    <van-cell title="团购专区" is-link to="index" class="bq">
      <van-tag  plain class="plain">更多团购商品</van-tag>
    </van-cell>
    <van-cell title="品牌商直供" is-link to="index" class="bq1">
      <van-tag  plain class="plain">更多品牌商</van-tag>
    </van-cell>
    <van-grid :column-num="2" class="brandList">
        <van-grid-item v-for="item in datalList.brandList" :key="item.id">
          <img :src=item.picUrl alt="">
          <span>{{ item.name }}</span>
        </van-grid-item>
    </van-grid>
    <van-cell title="新品首发" is-link to="index" class="bq1">
      <van-tag  plain class="plain">更多新品首发</van-tag>
    </van-cell>
    <van-grid :column-num="2" class="brandList newGoodsList">
        <van-grid-item v-for="item in datalList.newGoodsList" :key="item.id">
          <img :src=item.picUrl alt="">
          <span>{{ item.name }}</span>
          <span>￥{{ item.retailPrice }}</span>
        </van-grid-item>
    </van-grid>
    <van-cell title="人气推荐" is-link to="index" class="bq1">
      <van-tag  plain class="plain">更多人气推荐</van-tag>
    </van-cell>
    <van-grid :column-num="1" class="brandList hotGoodsList">
      <van-card v-for="item in datalList.hotGoodsList" :key="item.id"
      :price=item.retailPrice :desc=item.brief
      :title=item.name :thumb=item.picUrl
      :origin-price=item.counterPrice class="hotGoodsList-list"/>
    </van-grid>
    <van-grid :column-num="2" class="brandList topicList">
      <van-grid-item v-for="item in datalList.topicList" :key="item.id">
        <img :src=item.picUrl alt="">
        <span>{{ item.title }}</span>
        <span>{{ item.subtitle }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getHome } from '@/api/handpick'
import headInput from '@/components/headinput.vue'
export default {
  name: 'HomeVue',
  data () {
    return {
      value: '',
      datalList: {
        banner: [],
        channel: [],
        couponList: [],
        brandList: [],
        newGoodsList: [],
        hotGoodsList: [],
        topicList: []
      }
    }
  },
  components: {
    headInput
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      getHome().then((res) => {
        const data = res.data
        for (const key in data) {
          this.datalList[key] = data[key]
        }
      }).catch((err) => { console.log(err) })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #f2f2f2;
  margin-bottom: 50px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #fff;
}
.my-swipe img {
  width: 100%;
}
.list {
  background-color: #fff;
  margin-bottom: 0.4rem;
}
.van-coupon__content {
  border: 1px solid red;
  padding: 0;
}
.van-coupon__body {
  padding-top: 0.5rem;
}
.van-coupon__body p:first-child {
  font-size: 0.45rem;
  font-weight: normal;
}
.van-coupon__amount span {
  margin-right: 0.3rem;
}
.van-coupon__condition,
.van-coupon__valid {
  color: #969799;
}
.centent {
  padding: 7px 0;
}
.p{
  margin-bottom: 0;
  padding: 0;
}
.box{
  // height: 320px;
  // overflow-y: scroll;
  margin-bottom: .4rem;
}
.plain{
  border-color: #fff;
}
.bq{
  margin-bottom: .4rem;
}
.brandList img{
  width: 80%;
}
.brandList span{
  font-size: .4rem;
}
.brandList{
  margin-bottom: .4rem;
}
.newGoodsList span:first-child{
  color: rgb(123, 116, 116);
}
.newGoodsList span:last-child{
  color:  rgb(171, 149, 109);
}
.hotGoodsList-list{
  width: 100%;
  margin-top: 0;
}
.topicList span {
   color:  rgb(171, 149, 109);
}
.topicList span:last-child{
  font-size: .3rem;
}
</style>
